<template>
	<view class="compose_record">
		<u-navbar :is-back="false" title="">
			<view class="slot_content">
				<view class="nav_img" @click="backTo">
					<image src="@/static/17.svg"></image>
				</view>
				<view class="nav_title">合成记录</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="item" v-for="item in list">
				<image :src="item.product_cover"></image>
				<view class="item_view">
					<view class="name">{{item.product_name}}</view>
					<view class="time">{{item.created_at}}</view>
					<view class="item_code" v-for="(subItem,subIndex) in item.composeneed" :key="subIndex">
						{{subItem.product.name}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :loadText="$store.state.loadText" @loadmore="loadmore" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				
				list: [],
				page: 1,
				last_page: 1,
				limit: 10,
				status: "loadmore"
			}
		},
		async onLoad(option) {
			this.id=option.id;
			this.getList();
		},
		onReachBottom: function() {
			this.loadmore();
		},
		methods: {
			async getList() {
				let {
					list
				} = await this.$u.api.composeMy({
					compose_id:this.id,
					page: this.page,
					limit: this.limit
				});
				this.last_page = list.last_page;
				list = list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];
				if (this.last_page == this.page) {
					this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				let last_page = this.last_page;
				if (page < last_page) {
					this.page++;
					this.getList();
				}
			},
			backTo() {
				uni.navigateBack()
			}
		}
	};
</script>

<style scoped lang="scss">
	.compose_record {
		.content {
			padding: 44rpx 30rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				border-radius: 20rpx;
				margin-bottom: 44rpx;
				padding: 30rpx;
				box-sizing: border-box;
				background: #F0FBF3;
				display: flex;

				image {
					width: 280rpx;
					height: 280rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}

				.item_view {
					view {
						margin-bottom: 24rpx;
					}

					.name {
						color: #2A2A2A;
						font-size: 28rpx;
					}

					.time {
						color: #A7A7A7;
						font-size: 20rpx;
						font-weight: 400;
					}

					.item_code {
						text-indent: 40rpx;
						color: #A7A7A7;
						font-size: 24rpx;
						font-weight: 400;
						position: relative;

						&::after {
							content: "";
							width: 8rpx;
							height: 8rpx;
							line-height: 8rpx;
							border-radius: 50%;
							background-color: #ccc;
							position: absolute;
							left: 16rpx;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}
</style>
